import {httpRequest} from "../../http/request.js";
import {useQuery} from "react-query";

export const Post = () => {
    const {isLoading, error, data} = useQuery('todos', () =>
        httpRequest.get('/posts').then((res) => {
            return res.data;
        })
    );
    if (isLoading) return 'Loading...';
    if (error) return 'An error has occurred: ' + error.message;
    return (
        <>
            <table>
                <thead>
                <tr>
                    <th>Id</th>
                    <th>UserId</th>
                    <th>Title</th>
                    <th>Body</th>
                </tr>
                </thead>
                <tbody>
                {data.map((item) => (
                    <tr key={item.id}>
                        <td>{item.id}</td>
                        <td>{item.userId}</td>
                        <td>{item.title}</td>
                        <td>{item.body}</td>
                    </tr>
                ))}
                </tbody>
            </table>
        </>
    )
}